<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="padding: 20px;padding-bottom: 0;">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="文件数量" prop="fileNum">
            <el-input v-model="queryParams.fileNum" placeholder="请输入文件数量" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item>
   
        </el-col>
        <el-col :span="8">
          <el-form-item label="ip地址" prop="ipAddress">
            <el-input v-model="queryParams.ipAddress" placeholder="请输入路径" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="操作名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入操作名称" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="display: flex;justify-content: flex-end;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="pageTable" class="loading-area" border :data="dataList" highlight-current-row stripe >
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <el-table-column label="文件数量" align="center" prop="fileNum"  />
      <el-table-column label="操作名称"  align="center" prop="name" />
      <el-table-column label="ip地址" align="center" prop="ipAddress"  />
      <el-table-column label="路径" width="720" align="center" prop="path"  />
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
import convert from '@/utils/convert'
export default {
  name: 'index',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileNum: '',
        name: '',
        ipAddress: '',
      },
      baseUrl: ''
    };
  },
  created() {
    this.getTable();
  },
  methods: {
    getTable(){
      let { fileNum,name,ipAddress,pageNum,pageSize } = this.queryParams
      axios.get(`/api/ApiData/index?url=api/idx/videoLog/list&method=GET&pageNum=${pageNum}&pageSize=${pageSize}&fileNum=${fileNum}&ipAddress=${ipAddress}&name=${name}`).then(res => {
        let item = res.data.data
        this.dataList = item.rows
        this.total = item.total
        this.queryParams.pageNum = item.currentPage
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.getTable()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
      this.getTable()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getTable();
    },
    /** 重置按钮操作 */
    resetQuery(formName) {
      this.$refs[formName].resetFields();
      this.handleQuery();
    },
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
.analysis_info{
  display: flex;
  padding: 10px;
}
.analysis_info span{
  margin-right: 20px;
  font-size: 15px;
  color: blue;
  font-weight: 700;
}
.flexBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexBox_item{
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  align-items: center;
  padding-left: 20px;
}
.flexBox_item .title{
  font-size: 12px;
  color: #000;
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
  width: 84px;
}
.flexBox_item .btn{
  background: #fff;
  font-size: 12px;
  color: #000;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
/deep/.el-tabs--border-card{
  box-shadow: 0 0 black;
}
/deep/.el-tabs__content{
  background: #d4dff3;
}
</style>
